<template>
	<view class="confirmExam">
		<view class="box">
			<view class="top">
				<text class="title">费用类型</text>
				<text>{{ Data.costType }}</text>
			</view>
			<view class="top">
				<text class="title">就诊人</text>
				<text>{{ data2.user.name }}</text>
			</view>
			<view class="top" style="border: none;">
				<text class="title">就诊卡号</text>
				<text>{{ data2.user.cardNum }}</text>
			</view>
		</view>
		<view class="box2">
			<view class="top"><text class="title">费用明细</text></view>
			<view class="bottom" style="border: none; padding-bottom: 10rpx;">
				<view class="centent">
					<view>
						<text>{{ Data.packagename }}</text>
						<view class="left">
							<text>单价：¥{{ data2.sum }}</text>
							<text style="margin-left: 15px;">数量：{{ Data.count }}</text>
						</view>
					</view>

					<view>
						<text class="jg">¥{{ data2.sum }}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="box3">
			<view class="top">
				<text class="title">支付方式</text>
				<text style="margin-right: 210px;">余额</text>
			</view>
			<view class="top" style="border: none;">
				<view>
					<text class="title">卡内余额</text>
					<text>{{ data2.user.money }}元</text>
				</view>
				<view class="topup">
					<navigator url="../../TopUpOnline/OutpatientTopUp/OutpatientTopUp" hover-class="navigator-hover">
						<text class="bq">去充值</text>
						<uni-icons type="right" size="12" style="color: #f2f2f2;"></uni-icons>
					</navigator>
				</view>
			</view>
			<view class="bj">
				<navigator url="../reserveDetail/reserveDetail" hover-class="navigator-hover" style="display: flex;">
					<view class="prompt">预约前请仔细阅读</view>
					<view class="blue">《体检须知》</view>
				</navigator>
			</view>
		</view>
		<view class="end">
			<view class="end-left">
				<text style="font-size: 24rpx;">合计：</text>
				<text style="color: #F46363;font-size: 32rpx;">{{ data2.sum }}</text>
			</view>
			<view class="end-right" @click="go">{{ Data.operation }}</view>
		</view>
	</view>
</template>

<script setup>
import { reactive, computed, onMounted } from 'vue';
import {addAppointment} from '@/api/ExaminationService.js'
import { examinationDataStore } from '@/store/medicalStore.js';
const data2 = examinationDataStore();
let Data = reactive({
	sel: 0,
	sum: 0,
	operation: '确认支付',
	list2: [],
	count: 1,
	packagename: '',
	costType: '体检费',
	list: {}
});

// let mdata = computed(() => {
// 	let sum = 0
// 	for (const data2 of data.list2) {
// 		sum += data2.money
// 		console.log(sum)
// 	}
// 	return sum
// })
let go = v => {
	uni.navigateTo({
		url: `/pages/examinationService/successfulReserve/successfulReserve`
	});
	addAppointment({Data}).then(({ data }) => {
		console.log(data);
	});
};
const fn = () => {
	data2.package.forEach(v => {
		if (v.id == data2.packageid) {
			Data.packagename = v.name;
			console.log(Data.packagename);
		}
	});
};
onMounted(() => {
	console.log(data2);
	fn();
});
</script>

<style lang="less">
.confirmExam {
	width: 164rpx;
	.box {
		width: 686rpx;
		height: 336rpx;
		margin: 32rpx 38rpx 32rpx 32rpx;
		background-color: #fff;
		border: 2rpx solid #f2f2f2;
		border-radius: 15rpx;
		// margin-bottom: 50rpx;
		.top {
			width: 622rpx;
			height: 112rpx;
			margin-left: 32rpx;
			line-height: 112rpx;
			border-bottom: 1rpx solid #f2f2f2;
			font-family: 'PingFangSC-Ultralight', 'PingFang SC Ultralight', 'PingFang SC', sans-serif;
			font-weight: 100;
			font-style: normal;
			font-size: 14px;
			text-align: left;

			.title {
				color: #aaaaaa;
				margin-right: 10rpx;
			}
		}
	}
	.box2 {
		width: 686rpx;
		height: 232rpx;
		margin: 32rpx 38rpx 32rpx 32rpx;
		background-color: #fff;
		border: 2rpx solid #f2f2f2;
		border-radius: 15rpx;
		.top {
			width: 622rpx;
			height: 90rpx;
			margin-left: 32rpx;
			line-height: 90rpx;
			border-bottom: 1rpx solid #f2f2f2;
			font-family: 'PingFangSC-Ultralight', 'PingFang SC Ultralight', 'PingFang SC', sans-serif;
			font-weight: 100;
			font-style: normal;
			font-size: 14px;
			text-align: left;
			color: #aaaaaa;
			margin-right: 10rpx;
		}
		.bottom {
			width: 622rpx;
			height: 132rpx;
			margin-left: 32rpx;
			line-height: 112rpx;
			font-family: 'PingFangSC-Ultralight', 'PingFang SC Ultralight', 'PingFang SC', sans-serif;
			font-weight: 100;
			font-style: normal;
			font-size: 14px;
			text-align: left;
			.centent {
				display: flex;
				justify-content: space-between;
				align-items: center;
				.left {
					font-size: 12px;
					margin-top: -33px;
					font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
					font-weight: 400;
					font-style: normal;
					text-align: left;
					color: #aaaaaa;
				}
				.jg {
					font-family: 'PingFangSC-Medium', 'PingFang SC Medium', 'PingFang SC', sans-serif;
					font-weight: 500;
					font-style: normal;
				}
			}
			.title {
				color: #aaaaaa;
				margin-right: 10rpx;
			}
		}
	}
	.box3 {
		width: 686rpx;
		height: 232rpx;
		margin: 32rpx 38rpx 32rpx 32rpx;
		background-color: #fff;
		border: 2rpx solid #f2f2f2;
		border-radius: 15rpx;
		.top {
			width: 622rpx;
			height: 112rpx;
			margin-left: 32rpx;
			line-height: 112rpx;
			border-bottom: 1rpx solid #f2f2f2;
			font-family: 'PingFangSC-Ultralight', 'PingFang SC Ultralight', 'PingFang SC', sans-serif;
			font-weight: 100;
			font-style: normal;
			font-size: 14px;
			text-align: left;
			display: flex;
			justify-content: space-between;
			.title {
				color: #aaaaaa;
				margin-right: 10rpx;
			}
			.topup {
				.bq {
					font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
					font-weight: 400;
					font-style: normal;
					color: #006eff;
				}
			}
		}
		.bj {
			display: flex;
			.prompt {
				color: rgba(127, 127, 127, 0.55686274509);
				font-family: 'PingFangSC-Light', 'PingFang SC Light', 'PingFang SC', sans-serif;
				font-weight: 200;
				font-style: normal;
				font-size: 12px;
				margin-top: 16px;
			}
			.blue {
				margin-top: 16px;
				font-weight: 200;
				font-style: normal;
				font-size: 12px;
				margin-top: 16px;
				color: #006eff;
			}
		}
	}
	.end {
		width: 750rpx;
		height: 98rpx;
		background-color: #fff;
		border-top: 1px solid #f3f3f4;
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		align-items: center;
		&-left {
			width: 345rpx;
			display: flex;
			padding: 0 30rpx;
			align-items: center;
			.end-flex {
				display: flex;
				align-items: center;
			}
		}
		&-right {
			width: 345rpx;
			line-height: 90rpx;
			background-color: #006eff;
			text-align: center;
			color: #fff;
		}
	}
}
</style>
